<template>
    <div>
        <t1>添加页面</t1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>会员名称</td>
                    <td>
                        <input type="text" v-model="info.name" />
                    </td>
                </tr>
                <tr>
                    <td>会员年龄</td>
                    <td>
                        <input type="text" v-model="info.age" />
                    </td>
                </tr>
                <tr>
                    <td>会员电话</td>
                    <td>
                        <input type="text" v-model="info.phone" />
                    </td>
                </tr>
                <tr>
          <td align="right">门店图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.photo"
              width="100"
              height="100"
              v-if="info.photo != ''"
            />
          </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <button @click="add">添加</button>
            </td>
        </tr>
            </tbody>

        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info = reactive({
    name: "",
    age: "",
    phone: "",
    photo: ""

})
const img =(img1:any)=>{
    let obj=img1.target.files[0];
    let f=new FormData();
    f.append('fore',obj)
    axios({
        url:'/api/tu/img',
        data:f,
        method:'post',
        
        
    })
    .then(res=>{
        info.photo=res.data;
    })
}
const add = () => {
    if(info.name==''||info.age==''||info.phone==''){
        alert('请输入完整信息')
        return; 
    }
    axios({
        url: '/api/Hui/AddHUi',
        data: info,
        method: 'post' 
    })
    .then(res => {
       if(res.data>0){
        alert('添加成功')
       
       } 
       else
       {
        alert('添加失败')
        return;
       }
    })
}
</script>

<style scoped>

</style>